<template>
  <div class="game-types">
    <div class="game-types_title">游戏类型</div>

    <div class="game-type_card" style="margin-right: 15.5px" onclick="window.open('gameTypes.html','_self')">
      <div class="game-type_card_bgi" id="game-type_card_bgi_1" style="background-image: url('/src/assets/jiemiyouxi.png');">
        <div class="game-type_card_bgc" style="background-color: rgba(0,120,215,0.6);">
          <div class="game-type_card_title">解谜游戏</div>
        </div>
      </div>
    </div>


    <div class="game-type_card" onclick="window.open('gameTypesDongZuoMaoXian.html','_self')">
      <div class="game-type_card_bgi" id="game-type_card_bgi_2" style="background-image: url('/src/assets/dongzuoyouxi.png');">
        <div class="game-type_card_bgc" style="background-color: rgba(41,148,149,0.6);">
          <div class="game-type_card_title">动作冒险</div>
        </div>
      </div>
    </div>


    <div class="game-type_card" style="margin-right: 15.5px" onclick="window.open('gameTypesYiZhiYouXi.html','_self')">
      <div class="game-type_card_bgi" id="game-type_card_bgi_3" style="background-image: url('/src/assets/yizhiyouxi.png');">
        <div class="game-type_card_bgc" style="background-color: rgba(255,103,103,0.6);">
          <div class="game-type_card_title">益智游戏</div>
        </div>
      </div>
    </div>


    <div class="game-type_card" onclick="window.open('gameTypesMoNiJingYing.html','_self')">
      <div class="game-type_card_bgi" id="game-type_card_bgi_4" style="background-image: url('/src/assets/monijingying.png');">
        <div class="game-type_card_bgc" style="background-color: rgba(250,197,156,0.6);">
          <div class="game-type_card_title">模拟经营</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "AppGameTypes",
}
</script>

<style scoped>

.game-type_card_title{
  width: 592px;
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: white;
}

#game-type_card_bgi_1{
  background-image: url(../assets/banner/1.jpg);
}

.game-type_card_bgc{
  width: 592px;
  height: 300px;
}

.game-type_card_bgi:hover{
  scale: 103%;
}

.game-type_card_bgi:hover .game-type_card_title{
  text-decoration-line: underline;
}

.game-type_card:active{
  scale: 97%;
}

.game-type_card_bgi{
  transition: scale 0.5s;
  width: 592px;
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.game-type_card{
  width: 592px;
  height: 300px;
  margin-bottom: 9px;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: scale 0.1s;
}

.game-types{
  width: 1200px;
  height: 675px;
  /*background-color: greenyellow;*/
  color: black;
  padding-left: 0px;
}

.game-types_title{
  font-size: 22px;
  text-indent: 10px;
  height: 60px;
  line-height: 60px;
}

</style>